<!-- <script lang="ts">
	import { throttle } from 'lodash-es';
	import { onMount, tick } from 'svelte';

	const defaultStyle = 'transform: translateY(0px);transition: all 0.5s ease-in-out;';
	const getTransformStyle = (i: number) =>
		`transform: translateY(-${i * 30}px);transition: all 0.5s ease-in-out;`;
	const NoneTransform = `transform: translateY(0px);transition: none;`;

	export let range = 60; // 滚动范围
	export let num = 60; // 目标
	export let cur = 0; // 初始
  let nums_len = String(range).length;

	let items = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
	let TransformStyleList = [defaultStyle];
  
	onMount(() => {
		TransformStyleList = Array(nums_len).fill(defaultStyle);
	});

	const len = items.length;
	const step = throttle(async () => {
		const rangeArr = String(range).split('');
		const currentArr = String(cur).padStart(nums.length, '0').split('');
		String(num)
			.split('')
			.forEach((item, index) => {
				const current = Number(currentArr[index]);
				const range = Number(rangeArr[index]);
				TransformStyleList[index] = getTransformStyle(Number(current));
				if (current === range) {
					setTimeout(() => {
						cur = 0;
						TransformStyleList[index] = `transform: translateY(0px);transition: none;`;
					});
				}

				if (cur <= len) {
				}

				// if (item !== rangeArr[index])
			});

		// if (cur <= len) {

		//   TransformStyleList
		// 	await tick();
		// 	if (cur === len) {
		// 		cur = 0;
		// 		TransformStyle = `transform: translateY(0px);transition: none;`;
		// 	}
		// }
	}, 300);

	// $: {
	// 	if (num !== cur) step();
	// }

	const add = () => cur++;
	onMount(() => setInterval(() => (add(), step()), 500));
</script>

<div class="flex-cc">
	{#each nums as _, index}
		{@const numberList = index === 0 ? [...items.slice(0, Number(range[0])), '0'] : items}
		<div class="number-main overflow-hidden">
			<div class="number-wrapper flex flex-col" style={TransformStyleList[index]}>
				{#each numberList as item, index (index)}
					<span class="number-item block w-full h-20px bg-gray">{item}</span>
				{/each}
			</div>
		</div>
	{/each}
</div>

<style>
	.number-wrapper {
		/* animation: scroll 1s linear infinite; */
		width: 20px;
		height: 330px;
	}
	.number-main,
	.number-item {
		width: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		background-color: #000;
		display: inline-block;
		vertical-align: middle;
	}
</style> -->
